{% include "partial/header.html" %}
<main class="container">
    <div class="index">
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md8">
                    <div class="layui-col-md12">
                        <div class="layui-card">
                            <div class="layui-card-header">数据采集概况</div>
                            <div class="layui-card-body">

                                <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade"
                                     lay-filter="index-articleview">
                                    <div carousel-item id="index-articleview">
                                        <div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
                                        <div></div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md12">
                        <div class="layui-card">
                            <div class="layui-card-header">可用数据源概况</div>
                            <div class="layui-card-body">

                                <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade"
                                     lay-filter="index-sourceview">
                                    <div carousel-item id="index-sourceview">
                                        <div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
                                        <div></div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-col-md4">
                    <div class="layui-card">
                        <div class="layui-card-header">版本信息</div>
                        <div class="layui-card-body layui-text">
                            <table class="layui-table">
                                <colgroup>
                                    <col width="100">
                                    <col>
                                </colgroup>
                                <tbody>
                                <tr>
                                    <td>当前版本</td>
                                    <td>
                                        collector-v0.1.1
                                    </td>
                                </tr>
                                <tr>
                                    <td>开发者</td>
                                    <td>
                                        Fesion
                                    </td>
                                </tr>
                                <tr>
                                    <td>主要特色</td>
                                    <td>不用写正则 / 自动定时采集 / 支持批量数据源 / 操作简单</td>
                                </tr>
                                <tr>
                                    <td>GitHub</td>
                                    <td style="padding-bottom: 0;">
                                        <div class="layui-btn-container">
                                            <a href="https://github.com/fesiong/collector" target="_blank">https://github.com/fesiong/collector</a>
                                        </div>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <div class="layui-card">
                        <div class="layui-card-header">开发计划</div>
                        <div class="layui-card-body layui-text">
                            <div>√ 自动定时执行采集任务</div>
                            <div>√ 增加可视化添加采集列表连接、查看修改已采集内容操作界面</div>
                            <div>× 增加自动发布到远程服务器网站功能</div>
                            <div>× 增加关键词自动替换(伪原创的一部分)</div>
                            <div>× 增加内容自动分段重组功能(待定)</div>
                        </div>
                    </div>

                    <div class="layui-card">
                        <div class="layui-card-header">
                            采集器介绍
                        </div>
                        <div class="layui-card-body layui-text">
                            <p>这是一个由golang编写的采集器，可以自动识别文章列表和文章内容。使用它来采集文章并不需要编写正则表达式，你只需要提供文章列表页的连接即可。</p>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</main>
{% include "partial/footer.html" %}
<script>
    layui.use(["layer", "echarts", 'carousel'], function () {
        let $ = layui.$;
        let layer = layui.layer;
        let echarts = layui.echarts;
        let carousel = layui.carousel;
        $('.layadmin-carousel').each(function(){
            var othis = $(this);
            carousel.render({
                elem: this
                ,width: '100%'
                ,arrow: 'none'
                ,interval: othis.data('interval')
                ,autoplay: othis.data('autoplay') === true
                ,trigger: 'hover'
                ,anim: othis.data('anim')
            });
        });

        $.get('/api/index/echarts', function (res) {
            var echartsApp = [], options = [
                {
                    title: {
                        text: '今日采集文章量',
                        x: 'center',
                        textStyle: {
                            fontSize: 14
                        }
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['', '']
                    },
                    xAxis: [{
                        type: 'category',
                        boundaryGap: false,
                        data: res.data.hours
                    }],
                    yAxis: [{
                        type: 'value'
                    }],
                    series: [{
                        name: '文章',
                        type: 'line',
                        smooth: true,
                        itemStyle: {normal: {areaStyle: {type: 'default'}}},
                        data: res.data.articleHourCounts
                    }]
                },
                {
                    title: {
                        text: '一周采集文章量',
                        x: 'center',
                        textStyle: {
                            fontSize: 14
                        }
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['', '']
                    },
                    xAxis: [{
                        type: 'category',
                        boundaryGap: false,
                        data: res.data.days
                    }],
                    yAxis: [{
                        type: 'value'
                    }],
                    series: [{
                        name: '文章',
                        type: 'line',
                        smooth: true,
                        itemStyle: {normal: {areaStyle: {type: 'default'}}},
                        data: res.data.articleDayCounts,
                    }]
                }
            ]
                , elemDataView = $('#index-articleview').children('div')
                , renderDataView = function (index) {
                echartsApp[index] = echarts.init(elemDataView[index], layui.echartsTheme);
                echartsApp[index].setOption(options[index]);
            };

            //没找到DOM，终止执行
            if (!elemDataView[0]) return;

            renderDataView(0);

            //监听数据概览轮播
            var carouselIndex = 0;
            carousel.on('change(index-articleview)', function (obj) {
                renderDataView(carouselIndex = obj.index);
            });
            //可用数据
            var echartsSourceApp = [], sourceOptions = [
                {
                    title: {
                        text: '今日有用数据源量',
                        x: 'center',
                        textStyle: {
                            fontSize: 14
                        }
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['', '']
                    },
                    xAxis: [{
                        type: 'category',
                        boundaryGap: false,
                        data: res.data.hours
                    }],
                    yAxis: [{
                        type: 'value'
                    }],
                    series: [{
                        name: '数据源',
                        type: 'line',
                        smooth: true,
                        itemStyle: {normal: {areaStyle: {type: 'default'}}},
                        data: res.data.sourceHourCounts
                    }]
                },
                {
                    title: {
                        text: '一周有用数据源量',
                        x: 'center',
                        textStyle: {
                            fontSize: 14
                        }
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['', '']
                    },
                    xAxis: [{
                        type: 'category',
                        boundaryGap: false,
                        data: res.data.days
                    }],
                    yAxis: [{
                        type: 'value'
                    }],
                    series: [{
                        name: '数据源',
                        type: 'line',
                        smooth: true,
                        itemStyle: {normal: {areaStyle: {type: 'default'}}},
                        data: res.data.sourceDayCounts,
                    }]
                }
            ]
                , elemSourceView = $('#index-sourceview').children('div')
                , renderSourceView = function (index) {
                echartsSourceApp[index] = echarts.init(elemSourceView[index], layui.echartsTheme);
                echartsSourceApp[index].setOption(sourceOptions[index]);
            };

            //没找到DOM，终止执行
            if (!elemDataView[0]) return;

            renderSourceView(0);

            //监听数据概览轮播
            var carouselSourceIndex = 0;
            carousel.on('change(index-sourceview)', function (obj) {
                renderSourceView(carouselSourceIndex = obj.index);
            });
        }, 'json');
    });
</script>